<!--  -->
<template>
  <div id="detail">
      <detailnav class="navbar" @itemClick="itemClick" ref="detailNav" />
      <scroll class="content" ref="bscroll" :probeType="3" @scroll="detailScroll">
          <detailswiper :swiperimgs="swiperimgs" />
          <detailbaseinfo :goods="goods"/>
          <detailshop :shop="shop"/>
          <detailImages :images="images" @imgLoad="imgLoad"/>
          <detailparams :goodsparams="goodsparams" ref="params"/>
          <detailcomment :commentinfo="commentinfo" ref="comment"/>
          <goods :goods="recommendinfo" ref="recommend"/>
      </scroll>
      <backtop @click.native="backClick" v-show="isShowBackTop"></backtop>
      <detailbottombar @car_click="car_click"/>
      <toast :message="message" :isshow="isshow"/>
  </div>
</template>

<script>
import scroll from 'components/common/bscroll/BScroll.vue'

import detailnav from './childComps/detailNavbar.vue'
import detailswiper from './childComps/detailSwiper.vue'
import detailbaseinfo from './childComps/detailBaseInfo.vue'
import detailshop from './childComps/detailShop.vue'
import detailImages from './childComps/detailImages.vue'
import detailparams from './childComps/detailParams.vue'
import detailcomment from './childComps/detailComment.vue'
import goods from 'components/context/goods/goods.vue'
import detailbottombar from './childComps/detailBottomBar.vue'

import {getDetailData ,Goods,Shop,GoodsParam,getRecommendData} from 'network/detail.js'
import {debounce} from 'common/utils.js'
import {backTopMixin} from 'common/mixin.js'

import toast from 'components/common/toast/Toast.vue'


export default {
  name:'Detail',
  data() {
      return {
          iid:null,
          swiperimgs:[],
          goods:{},
          shop:{},
          images:[],
          goodsparams:{},
          commentinfo:{},
          recommendinfo:[],
          offsetTopYs:[],
          getThemeTopY:null,
          currentIndex:0,
          message:'',
          isshow : false
      }
  },
  mixins:[backTopMixin],
  components:{
      detailnav,
      detailswiper,
      detailbaseinfo,
      detailshop,
      detailImages,
      detailparams,
      detailcomment,
      goods,
      detailbottombar,
      toast,
      scroll,
  },
  created() {
      this.iid = this.$route.params.iid
      this.getSetailData();
      this.getRecommendData();
  },
  methods:{
      getSetailData() {
          getDetailData(this.iid).then(res => {
            //   console.log(res);
              const data = res.data.result
              //获取轮播图
              this.swiperimgs = data.itemInfo.topImages
              //获取goods数据
              this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
              //获取店铺信息
              this.shop = new Shop(data.shopInfo)
              this.images = data.detailInfo.detailImage[0].list;
              //获取参数信息
              this.goodsparams = new GoodsParam(data.itemParams.info,data.itemParams.rule);
              //获取评论数据
              if(data.rate.cRate !== 0){
                this.commentinfo = data.rate.list[0]
              }

              this.getThemeTopY = debounce(() => {
                  this.offsetTopYs = [];
                  this.offsetTopYs.push(0);
                  this.offsetTopYs.push(this.$refs.params.$el.offsetTop);
                  this.offsetTopYs.push(this.$refs.comment.$el.offsetTop);
                  this.offsetTopYs.push(this.$refs.recommend.$el.offsetTop);
                  this.offsetTopYs.push(Number.MAX_VALUE);
              })

          })
         },
        getRecommendData() {
            getRecommendData().then(res => {
                // console.log(res.data.data.list);
                this.recommendinfo = res.data.data.list
            })
        },
      imgLoad() {
        this.$refs.bscroll.refresh();

        this.getThemeTopY()
      },
      itemClick(index) {
          this.$refs.bscroll.scrollTo(0,-this.offsetTopYs[index],300)
      },
      detailScroll(position) {
          this.isShowBackTopFunc(position);
          const positionY = -position.y
          for(let i=0;i<this.offsetTopYs.length-1;i++){
              if(this.currentIndex !== i && (positionY >= this.offsetTopYs[i] && positionY <= this.offsetTopYs[i+1])){
                  this.currentIndex = i;
                  this.$refs.detailNav.currentIndex = this.currentIndex
              }
          }
      },
      //加入购物车事件
    car_click() {
        //   console.log(this.iid);
        const carItem = {}
        carItem.image = this.swiperimgs[0];
        carItem.title = this.goods.title;
        carItem.price = this.goods.realPrice;
        carItem.desc = this.goods.desc;
        carItem.iid = this.iid;
        carItem.name = this.shop.name;

        // this.$store.commit('addToCar',carItem);
        //把添加数据的方法放到actions要用dispatch提交
        this.$store.dispatch('addToCar',carItem).then(res => {
            // this.$toasted.show(res)
            this.message = res;
            this.isshow = true
            setTimeout(() => {
                this.message = '';
                this.isshow = false
            },2000)
        })  
        

    }     
  }
  
}
</script>

<style  scoped>

    #detail{
        position: relative;
        z-index: 9;
        background-color: #fff;
    }
    .navbar{
        position: relative;
        z-index: 9;
        background-color: #fff;
    }
    .content{
        position: absolute;
        top: 44px;
        left: 0;
        height: calc(100vh - 93px); 
        background: #fff;
        overflow: hidden;
    }
</style>
